<template>
    <div>
        <div class="peisong">
            <div class="title">
                配送方式
            </div>
            <div class="allItem">
                 <div :class="item.is_solid?'item_song':'item_song active'" v-for="(item,index) in delivery_modes" :key="index" @click="chloesSong(item)">
                 <van-icon :name="item.is_solid?'eye-o':'success'"></van-icon>   {{item.text}}
                 </div>
            </div>
        </div>
        <div class="peisong">
             <div class="title">
            商家属性(可以多选)
        </div>
        <div class="allItem">
            <div :class="item.__v == 0?'item_song':'item_song active'" v-for="(item,index) in actively" :key="index" @click="changeAttr(item)">
            <van-tag plain :color="'#'+item.icon_color" v-if=" item.__v==0">{{item.icon_name}}</van-tag> 
       
            <van-icon name="success" v-else></van-icon>
            {{item.name}}
            </div>
        </div>
        </div>
        <!-- 按钮 -->
        <div class="btns">
            <div>
                <van-button type="default" block @click="clear">清空</van-button>
            </div>
            <div>
                <van-button type="primary" block @click="comfire">确定<span v-show="getSum!=0">({{getSum}})</span></van-button>
            </div>
        </div>
    </div>
</template>
<script>
import {  getdelivery_modes, getAcitivily} from '@/api/cate'
export default {
    props:['latitude','longitude'],
    data() {
        return {
            delivery_modes:[],
            actively:[],
            // 存放配送方式 
            modes:[],
            // 存放选中的商家属性
            attr:[]
        }
    },
    async created(){
        let data = {
            latitude:this.latitude,
            longitude:this.longitude
        }
        let res = await getdelivery_modes(data);
        console.log(res.data)
        this.delivery_modes = res.data;
        // 获取商家属性
        let arrt = await getAcitivily(data);
        console.log(arrt)
        this.actively  =arrt.data;
    },
    methods:{
        chloesSong(item){
            item.is_solid = !item.is_solid;
            if(!item.is_solid){
                this.modes.push(item)
            }else{
                let index = this.modes.findIndex(modes=>{
                    return modes.id == item.id;
                })
                this.modes.splice(index,1)
            }
        },
        changeAttr(item){
            if( item.__v==0){
                 item.__v=1
                 this.attr.push(item)
            }else{
                item.__v = 0
                let index = this.attr.findIndex(value=>{
                    return value.id == item.id;
                })
                this.attr.splice(index,1)
            }
        },
        // 清空选择
        clear(){
            this.modes = [];
            this.attr = [];
            this.delivery_modes.forEach(item=>{
                item.is_solid = true;
            })
            this.actively.forEach(item=>{
                item.__v = 0;
            })
        },
        // 确定
        comfire(){
            this.$emit("sendIds",this.modes,this.attr)
        }
    },
    computed:{
        getSum(){
            return this.modes.length +this.attr.length;
        }
    }
}
</script>
<style lang="less" scoped>
 .peisong{
    padding: 10px;
    color: #666;
    .title{
        font-size: 14px;
    }
    .allItem{
        display: flex;
        flex-wrap: wrap;
    }
    .item_song{
        border: 1px solid #f1f1f1;
        width: 100px;
        height: 36px;
        line-height: 30px;
        font-size: 14px;
        padding: 3px 7px;
        margin-top: 10px;
        margin-right: 10px;
    }
    .active{
        color: #3190e8;
    }
 }
 .btns{
    display: flex;
    padding: 10px;
    justify-content: space-between;
 }
 .btns>div{
    width: 48%;
 }

</style>